Passed
Push — main ( 394b21...fd6a98 )
by Andrii
02:09
created

App.tsx ➔ App   A

Complexity

Conditions 1

Size

Total Lines 25
Code Lines 21

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
eloc 21
dl 0
loc 25
rs 9.376
c 0
b 0
f 0
1
import React from "react"
2
import classNaming, {classNamesMap} from "../src"
3
import type { ClassNames, ClassNamesProperty, ClassHash, ClassNamed } from "../src"
4
5
import MyComponent from "./MyComponent"
6
import ThirdParty, { ThirdPartyProps } from "./node_modules-third_party_component"
7
8
type AppClassNames = ClassNamed & ClassNamesProperty<{
9
  "app__container": ClassHash
10
  "app__item": ClassHash
11
}>
12
type AppProps = AppClassNames & ClassNames<typeof MyComponent>
13
14
export default function App(props: AppProps) {
15
  const myCssClasses = classNaming<AppClassNames>(props)
16
  const withClassName = myCssClasses(true) // `${className}`
17
18
  const {classnames} = props
19
20
  const cssClassesMapping = classNamesMap(classnames)
21
     
22
  return <>{ "/// App.tsx" }
23
         {/* className=`${className} app__container` */}
24
    <div {...withClassName({"app__container": true})}>
25
      <MyComponent {...{
26
        classnames,
27
        // className: `${className} app__item`
28
        ...withClassName({"app__item": true})
29
      }} />
30
      <ThirdParty {
31
        ...cssClassesMapping({} as ThirdPartyProps,{
32
                              // "app__item"
33
          containerClassName: { "app__item": true }
34
        })
35
      } />
36
    </div>
37
  </>
38
}
39